<template>
    <div class="page recommend">
        <div class="hd">
            <h1 class="page_title">选择感兴趣的游戏类型</h1>
            <p class="page_desc">游戏钱吧会根据你的选择优先推荐游戏哦~</p>
            <p class="index">{{selectCount}}/6</p>
        </div>
        <div class="box">
            <swiper :height='height' :current.sync="current" :show_dots="false">
                <swiper-item v-for="game in games">
                    <Grid :items="game" :click-handler="gameSelect"></Grid>
                </swiper-item>
            </swiper>
        </div>
        <div class="indicator">
            <i class="icon_dot" v-for="game in games" :class="{'active':$index===current}"></i>
        </div>
        <div class="bd">
            <a class="weui_btn weui_btn_warn start_btn" @click="goNext">开始游戏推荐 -></a>
        </div>
        <msg :data="errorData"></msg>
    </div>
</template>

<script type="text/ecmascript-6">
    import server from '../lib/server'
    import {setSession,isLogin,getSession} from '../lib/session'
    import Swiper from '../components/Swiper.vue'
    import SwiperItem from '../components/SwiperItem.vue'
    import Grid from '../weui/Grid.vue'
    import Msg from '../components/Msg.vue'
var gamesData=function(val){
    var map=function(list){
        return list.map((n)=>{
            var item=window.game_icon_map[n];
            return {
                id:n,
                img:item.icon,
                text:item.name,
                select:false
            }
        });
    };

    return map(val||['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D']);
};
export default {
  components:{
    Grid,Swiper,SwiperItem,Msg
  },
  data () {
    return {
        serverData:getSession(),
        gamesData:gamesData(),
        current:0,
        height:260,
        errorData:{}
    }
  },
  ready () {
    this.height=this.height*parseFloat($('html').css('fontSize'))/16;
    server('/P/Public/getmappings').success((response)=>{
        if(response.code==1){
          this.gamesData=gamesData(response.data);
          setTimeout(()=>{
             this.$broadcast('swiper_data');
          },0);
        }else{

        }
    });
  },
  computed:{
    games(){
        var out=[];
        this.gamesData.forEach((game,i)=>{
            if(i%9==0){
                out.push([]);
            }
            out[out.length-1].push(game);
        });
        return out;
    },
    selectCount(){
        var count=0;
        this.gamesData.forEach((n)=>{
            count+=n.select?1:0;
        });
        this.serverData.attr=this.gamesData.filter((item)=>{
            return item.select;
        }).map((n)=>n.id).join('');
        return count;
    }
  },
  methods:{
    gameSelect(item,index){
        if(this.selectCount>=6&&!item.select){
            return;
        }
        item.select=!item.select;
    },
    goNext(){
        server('/P/U/DoNMas_WX',{
            session_id:this.serverData.session_id,
            attrs:this.serverData.attr
        }).success((response)=>{
            if(response.code==1){
                setSession(this.serverData);
                this.$router.go('home');
            }else{
                if(response.code==19){
                    this.errorData={
                        show:true,
                        type:'login'
                    };
                }else{
                    this.errorData={
                        show:true,
                        type:'error',
                        msg:response.msg
                    };
                }
            }
        });
    }
  },
  destroyed () {
  }
}
</script>

<style lang="less">
    .recommend{
        .hd {
            padding: 32rem/16 0;
            text-align: center;
            .page_desc {
                color: #888;
                padding: 0.2em 0;
                font-size: 14rem/16;
            }
            .index{
                padding: 10rem/16 0;
            }
        }
        .box{
            .weui_grids{
                margin:0 auto;
                width:90%;
                &:before{
                     border-top:none;
                 }
                &:after{
                     border-left: none;
                 }
            }
            .swiper{
                height:280rem/16;
                .item a{
                    width:100%/3;
                }
            }

            .weui_grid{
                padding: 5rem/16 5rem/16;
                &:before{
                     border-top:none;
                     border-right:none;
                 }
                 &:after{
                      border-bottom: none;
                  }
                .weui_grid_icon{
                    width:50rem/16;
                    height:50rem/16;
                }
            }
        }
        .indicator{
            position: static;
            text-align: center;
            .icon_dot{
                margin-left: 6px;
                background-color: #ffffff;
                &.active{
                    background-color: #9a9a9a;
                }
            }
        }
        .page_title {
            text-align: center;
            font-size: 22rem/16;
            color: #333;
            font-weight: 400;
            margin: 0 15%;
        }

        .weui_btn{
            width:80%;
            border-radius:25rem/16;
            margin-top: 10rem/16;
            font-size:18rem/16;
        }
        .weui_btn.start_btn:after{
            border-radius:50rem/16;
        }
    }
</style>
